<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- Preconnect to Google Fonts for faster loading of the 'Orbitron' font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- Link to Google Font 'Orbitron' with specified weights -->
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet">
    <title>Rock-Paper-Scissors Game</title>
    <!-- Link to external CSS for styling the webpage -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Game title with interactive words that can potentially include animations -->
    <h1><span id="rock">Rock  </span>    -   <span id="paper">Paper  </span>   -   <span id="scissors">Scissors</span></h1>
    
    <!-- Main game container -->
    <div id="game">
        <!-- Section where the player can choose their move -->
        <div id="player-choice">
            <h2>Choose Your Weapon:</h2>
            <!-- Buttons for selecting rock, paper, or scissors -->
            <button class="choice" id="rock">
                <img src="img/rock.png" alt="Rock"> <!-- Image representing rock -->
                <span>Rock</span> <!-- Label for the button -->
            </button>
            <button class="choice" id="paper">
                <img src="img/paper.png" alt="Paper"> <!-- Image representing paper -->
                <span>Paper</span> <!-- Label for the button -->
            </button>
            <button class="choice" id="scissors">
                <img src="img/scissors.png" alt="Scissors"> <!-- Image representing scissors -->
                <span>Scissors</span> <!-- Label for the button -->
            </button>
        </div>
        
        <!-- Section to display results and scores -->
        <div id="result">
            <h2>Results:</h2>
            <p id="message"></p> <!-- Placeholder for result messages -->
            <p>Player Score: <span id="player-score">0</span></p> <!-- Display player's score -->
            <p>Computer Score: <span id="computer-score">0</span></p> <!-- Display computer's score -->
        </div>
        <!-- Button to reset the game -->
        <button id="reset">R E S E T</button>
    </div>
    <!-- Link to external JavaScript file containing game logic -->
    <script src="script.js"></script>
</body>
</html>
